<template>
  <div style="height: 700px">
    <e-charts ref="chart" :option="option" style="" class="box" />
  </div>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons");
export default {
  data() {
    return {
      percent1: "0",
      percent2: "0",
      percent3: "0",
      percent4: "0",
      percent5: "0",
      percent6: "0",
      percent7: "0",
      percent8: "0",
      percent9: "0",
      percent10: "0",
      percent11: "0",
      percent12: "0",
      percent13: "0",
      percent14: "0",
      percent15: "0",
      percent16: "0",
      mal: "",
      count: 0,
      option: {},
      // option1: {
      //   title: {
      //     text: 'Referer of a Website',
      //     subtext: 'Fake Data',
      //     left: 'center'
      //   },
      //   tooltip: {
      //     trigger: 'item'
      //   },
      //   legend: {
      //     orient: 'vertical',
      //     left: 'left'
      //   },
      //   series: [
      //     {
      //       name: 'Access From',
      //       type: 'pie',
      //       radius: '50%',
      //       data: [
      //         { value: 1048, name: 'Search Engine' },
      //         { value: 735, name: 'Direct' },
      //         { value: 580, name: 'Email' },
      //         { value: 484, name: 'Union Ads' },
      //         { value: 300, name: 'Video Ads' }
      //       ],
      //       emphasis: {
      //         itemStyle: {
      //           shadowBlur: 10,
      //           shadowOffsetX: 0,
      //           shadowColor: 'rgba(0, 0, 0, 0.5)'
      //         }
      //       }
      //     }
      //   ]
      // },
    };
  },
  mounted() {
    this.getpercent1();
    this.getpercent2();
    this.getpercent3();
    this.getpercent4();
    this.getpercent5();
    this.getpercent6();
    this.getpercent7();
    this.getpercent8();
    this.getpercent9();
    this.getpercent10();
    this.getpercent11();
    this.getpercent12();
    this.getpercent13();
    this.getpercent14();
    this.getpercent15();
    this.getpercent16();

    setTimeout(() => {
      this.initChart();
    }, 1000);
  },
  methods: {
    initChart() {
      this.option = {
        title: {
          text: "人格测试",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: [
              { value: this.percent1, name: "ENFJ" },
              { value: this.percent2, name: "ENFP" },
              { value: this.percent3, name: "ENTJ" },
              { value: this.percent4, name: "ENTP" },
              { value: this.percent5, name: "ESFJ" },
              { value: this.percent6, name: "ESFP" },
              { value: this.percent7, name: "ESTJ" },
              { value: this.percent8, name: "ESTP" },
              { value: this.percent9, name: "INFJ" },
              { value: this.percent10, name: "INFP" },
              { value: this.percent11, name: "INTJ" },
              { value: this.percent12, name: "INTP" },
              { value: this.percent13, name: "ISFJ" },
              { value: this.percent14, name: "ISFP" },
              { value: this.percent15, name: "ISTJ" },
              { value: this.percent16, name: "ISTP" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
    },
    getpercent1() {
      const that = this;
      this.$axios
        .get("/getper1", { params: { xx: "ENFJ" } })
        .then(function (response) {
          that.percent1 = response["data"]["per"];
        });
    },
    getpercent2() {
      const that = this;
      this.$axios
        .get("/getper2", { params: { xx: "ENFP" } })
        .then(function (response) {
          that.percent2 = response["data"]["per"];
        });
    },
    getpercent3() {
      const that = this;
      this.$axios
        .get("/getper3", { params: { xx: "ENTJ" } })
        .then(function (response) {
          that.percent3 = response["data"]["per"];
        });
    },
    getpercent4() {
      const that = this;
      this.$axios
        .get("/getper4", { params: { xx: "ENTP" } })
        .then(function (response) {
          that.percent4 = response["data"]["per"];
        });
    },
    getpercent5() {
      const that = this;
      this.$axios
        .get("/getper5", { params: { xx: "ESFJ" } })
        .then(function (response) {
          that.percent4 = response["data"]["per"];
        });
    },
    getpercent6() {
      const that = this;
      this.$axios
        .get("/getper6", { params: { xx: "ESFP" } })
        .then(function (response) {
          that.percent6 = response["data"]["per"];
        });
    },
    getpercent7() {
      const that = this;
      this.$axios
        .get("/getper7", { params: { xx: "ESTJ" } })
        .then(function (response) {
          that.percent7 = response["data"]["per"];
        });
    },
    getpercent8() {
      const that = this;
      this.$axios
        .get("/getper8", { params: { xx: "ESTP" } })
        .then(function (response) {
          that.percent8 = response["data"]["per"];
        });
    },
    getpercent9() {
      const that = this;
      this.$axios
        .get("/getper9", { params: { xx: "INFJ" } })
        .then(function (response) {
          that.percent9 = response["data"]["per"];
        });
    },
    getpercent10() {
      const that = this;
      this.$axios
        .get("/getper10", { params: { xx: "INFP" } })
        .then(function (response) {
          that.percent10 = response["data"]["per"];
        });
    },
    getpercent11() {
      const that = this;
      this.$axios
        .get("/getper11", { params: { xx: "INTJ" } })
        .then(function (response) {
          that.percent11 = response["data"]["per"];
        });
    },
    getpercent12() {
      const that = this;
      this.$axios
        .get("/getper12", { params: { xx: "INTP" } })
        .then(function (response) {
          that.percent12 = response["data"]["per"];
        });
    },
    getpercent13() {
      const that = this;
      this.$axios
        .get("/getper13", { params: { xx: "ISFJ" } })
        .then(function (response) {
          that.percent13 = response["data"]["per"];
        });
    },
    getpercent14() {
      const that = this;
      this.$axios
        .get("/getper14", { params: { xx: "ISFP" } })
        .then(function (response) {
          that.percent14 = response["data"]["per"];
        });
    },
    getpercent15() {
      const that = this;
      this.$axios
        .get("/getper15", { params: { xx: "ISTJ" } })
        .then(function (response) {
          that.percent15 = response["data"]["per"];
        });
    },
    getpercent16() {
      const that = this;
      this.$axios
        .get("/getper16", { params: { xx: "ISTP" } })
        .then(function (response) {
          that.percent16 = response["data"]["per"];
        });
    },
  },
};
</script>
<style scoped>
.chart {
  height: 400px;
}
.box {
  height: 700px;
  width: 100%;
  /* border:1px solid; */
}
</style>